<template>
  <div>
    <div id="operationButton">
      <a-button size="large" type="primary" @click="onAddButtonClick">
        添加
      </a-button>
      <a-modal
        v-model:visible="addOrEditDialogVisible"
        title="添加实验信息"
        :width="600"
        :keyboard="false"
        :maskClosable="false"
        :footer="null"
        :destroyOnClose="true"
        centered
      >
        <AddOrEditExperimentInfo
          :url="editUrl"
          @operate-success="closeAddDialog"
          @operate-failed="closeAddDialog"
        />
      </a-modal>
    </div>
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 10 }"
      :scroll="{ x: 240 }"
    >
      <template #operation="{ record }">
        <span>
          <a @click="onEdit(record.key)"><EditOutlined />编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            v-if="data.length"
            title="确定删除吗？"
            okText="确定"
            cancelText="取消"
            @confirm="onDelete(record.key)"
          >
            <a><DeleteOutlined />删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>
  </div>
</template>


<script>

import AddOrEditExperimentInfo from "./AddOrEditExperimentInfo";
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

  const columns = [
  {
    title: '实验名称',
    dataIndex: 'experiment_name',
    width: 150,
  },
  {
    title: '课题名称',
    dataIndex: 'subject_name',
    width: 150,
  },
  {
    title: '实验编号',
    dataIndex: 'experiment_num',
    width: 150,
  },
  {
    title: '实验人员',
    dataIndex: 'experimenter',
    width: 150,
  },
  {
    title: '审核人',
    dataIndex: 'experiment_reviewer',
    width: 150,
  },
    {
    title: '操作',
    dataIndex: 'operation',
    slots: { customRender: 'operation' },
    width: 150,
  },
]

// const data = []
// let data = []
// for (let i = 0; i < 100; i++) {
//   data.push({
//     key: i,
//     name: `Edward King ${i}`,
//     age: 32,
//     address: `London, Park Lane no. ${i}`,
//   })
// }

// Axios.defaults.baseURL = '/api'

export default {
  name: 'ExperimentInfo',
  emits: ['add'],
  components: {
    AddOrEditExperimentInfo,
    EditOutlined,
    DeleteOutlined,
  },
  data() {
    return {
      data: [],
      loading: false,
      addOrEditDialogVisible: false,
      columns,
      editUrl: '',
    }
  },


  mounted() {
    this.fetch()
  },

 methods: {
    // 从后端获取数据
    fetch() {
      this.loading = true
      this.axios
        .get('/experiment_management/experiment_information/')
        .then((res) => {
          const data = res.data
          for (let i = 0; i < data.length; ++i) {
            this.data.push({
              key: data[i].url,
              experiment_name: data[i].experiment_name,
              subject_name: data[i].readable_subject_name,
              experiment_num: data[i].experiment_num,
              experimenter: data[i].experimenter,
              experiment_reviewer: data[i].readable_experiment_reviewer,
            })
          }
          // console.log('chemical:', res)
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
    },
    onAddButtonClick() {
      this.editUrl = ''
      this.addOrEditDialogVisible = true
      // this.$emit('add')
    },
    closeAddDialog() {
      this.addOrEditDialogVisible = false
    },
    onEdit(key) {
      // console.log(key)
      this.editUrl = key
      this.addOrEditDialogVisible = true
    },
    onDelete(key) {
      message.loading({ content: '删除中...', key })
      const data = [...this.data]
      this.axios
        .delete(key)
        .then(() => {
          setTimeout(() => {
            message.success({ content: '删除成功！', key, duration: 2 })
            this.data = data.filter((item) => item.key !== key)
          }, 1000)
        })
        .catch((error) => {
          setTimeout(() => {
            message.error({ content: '删除失败！', key, duration: 2 })
          }, 1000)
          console.log('Error', error.message)
        })
    },
  },

}
</script>


<style>
#operationButton {
  text-align: right;
  padding: 20px;
}
</style>